<template>
  <cancel
    :orderId="orderId"
    :phone="phone"
    :orderInfo="orderInfo"
    :longitude="longitude"
    :latitude="latitude"
    :takeAddress="takeAddress"
    :receiveAddress="receiveAddress"
    @onRefresh="onRefresh"
    v-if="currentProcess === -1"
  />
  <un-pay
    :orderId="orderId"
    :phone="phone"
    :orderInfo="orderInfo"
    :longitude="longitude"
    :latitude="latitude"
    :takeAddress="takeAddress"
    :receiveAddress="receiveAddress"
    @onRefresh="onRefresh"
    v-else-if="currentProcess === 0"
  />
  <un-receive
    :orderId="orderId"
    :phone="phone"
    :orderInfo="orderInfo"
    :longitude="longitude"
    :latitude="latitude"
    :takeAddress="takeAddress"
    :receiveAddress="receiveAddress"
    @onRefresh="onRefresh"
    v-else-if="currentProcess === 1"
  />
  <running
    :orderId="orderId"
    :phone="phone"
    :orderInfo="orderInfo"
    :longitude="longitude"
    :latitude="latitude"
    :takeAddress="takeAddress"
    :receiveAddress="receiveAddress"
    @onRefresh="onRefresh"
    v-else-if="currentProcess === 2 || currentProcess === 3"
  />
  <complete
    :orderId="orderId"
    :phone="phone"
    :orderInfo="orderInfo"
    :longitude="longitude"
    :latitude="latitude"
    :takeAddress="takeAddress"
    :receiveAddress="receiveAddress"
    @onRefresh="onRefresh"
    v-else-if="
      currentProcess === 4 || currentProcess === 5 || currentProcess === 6
    "
  />
</template>
<script>
import Cancel from "./components/order-detail-cancel.vue";
import UnPay from "./components/order-detail-unpay.vue";
import complete from "./components/order-detail-complete.vue";
import unReceive from "./components/order-detail-unReceive.vue";
import running from "./components/order-detail-running.vue";
import { getLocation } from "@/common/location.js";
import isEmpty from "lodash/isEmpty";
export default {
  components: {
    running,
    unReceive,
    UnPay,
    complete,
    Cancel,
  },
  data() {
    return {
      orderInfo: {},
      orderId: "",
      latitude: 0,
      setIntId: "",
      longitude: 0,
      currentProcess: -2, // 订单状态
    };
  },
  onLoad(options) {
    this.orderId = options.orderId;
    this.setIntId = setInterval(() => {
      this.getData();
    }, 5000);
  },
  onUnload() {
    if (this.setIntId) {
      clearInterval(this.setIntId);
    }
  },
  onShow() {
    this.getData();
    if (this.centerData) {
      uni.showModal({
        content: "是否确定更换地址",
        success: (res) => {
          if (res.confirm) {
          }
        },
      });
    }
  },
  watch: {},
  computed: {
    phone() {
      return this.vuex_client.appletCode;
    },
    runnerPhone() {
      return (
        (this.orderInfo &&
          this.orderInfo.runner &&
          this.orderInfo.runner.mobile) ||
        ""
      );
    },
    _longitude() {
      if (isEmpty(this.orderInfo)) {
        return 0;
      }
    },
    takeAddress() {
      // 取
      if (!this.orderInfo) return "-";
      if (this.orderInfo.serviceType === 1) {
        // 取件
        return this.orderInfo.site ? this.orderInfo.site.address : "-";
      } else {
        // 送件
        return this.orderInfo.addr ? this.orderInfo.addr.address : "-";
      }
    },
    receiveAddress() {
      // 取
      if (!this.orderInfo) return "-";
      if (this.orderInfo.serviceType === 1) {
        // 取件
        return this.orderInfo.addr ? this.orderInfo.addr.address : "-";
      } else {
        // 送件
        return this.orderInfo.site ? this.orderInfo.site.address : "-";
      }
    },
  },
  methods: {
    onRefresh() {
      this.getData();
    },
    async getData() {
      getLocation().then(({ latitude, longitude }) => {
        this.latitude = latitude; // latitude
        this.longitude = longitude; // longitude
        this.$u.api
          .queryOrderDetail({
            tradeNo: this.orderId,
            lat: latitude,
            lon: longitude,
          })
          .then((res) => {
            if (!res.data) {
              uni.showToast({
                title: "获取订单信息失败",
                icon: "error",
              });
              return;
            }
            this.orderInfo = {
              ...res.data || {},
              // runner: {
              //   ...res.data.runner,
              //   lat: res.data.runner.lat + Math.random() / 100,
              //   lon: res.data.runner.lon + Math.random() / 100,
              // }
            };
            this.currentProcess = res.data.status;
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
